/*
  学习目标：非受控组件 - 概念
  DOM本身具备管理表单元素值的能力
  不受state控制, 由DOM管理数据的表单组件, 就是非受控组件
  👍 受控组件更符合数据驱动视图的思想
*/

import React from 'react';

export default class App extends React.Component {
  handleClick = () => {
    const name = document.querySelector('#username').value;
    const desc = document.querySelector('#username').value;
    console.log('name, desc  ----->  ', name, desc);
  };

  render() {
    return (
      <div>
        姓名：
        <input type="text" name="username" id="username" />
        <br />
        描述：<textarea name="desc" id="desc"></textarea>
        <br />
        城市：
        <select name="city" id="city">
          <option value="1">北京</option>
          <option value="2">上海</option>
          <option value="3">广州</option>
          <option value="4">深圳</option>
        </select>
        <br />
        是否单身：
        <input name="isSingle" type="checkbox" id="isSingle" />
        <button onClick={this.handleClick}>点击提交到后台</button>
      </div>
    );
  }
}
